<script setup>
import { ref, onMounted } from 'vue'
import { ElButton, ElCard, ElSkeleton } from 'element-plus'
import { useRouter } from 'vue-router'
import { getSongListApi } from '@/api/song.js'
import { getAlbumPage } from '@/api/album.js'
import { getPlaylistPage } from '@/api/playlist.js'

const popularSongs = ref([])
const popularAlbums = ref([])
const popularPlaylists = ref([])
const isLoading = ref(true)

const router = useRouter()

const goToAlbumList = () => {
  router.push({ name: 'HomeAlbum' })
}

const goToPlaylistList = () => {
  router.push({ name: 'HomePlaylist' })
}

const goToFavorites = () => {
  router.push({
    name: 'HomePlaylist',
    query: {
      isLiked: true
    }
  })
}

const goToSongsList = () => {
  router.push({ name: 'SongList' })
}

const init = async () => {
  try {
    const [songRes, albumRes, playlistRes] = await Promise.all([
      getSongListApi({ pageNum: 1, pageSize: 3, status: 1 }),
      getAlbumPage({ pageNum: 1, pageSize: 3 }),
      getPlaylistPage({ pageNum: 1, pageSize: 3 })
    ])
    popularSongs.value = songRes.data['records']
    popularAlbums.value = albumRes.data['records']
    popularPlaylists.value = playlistRes.data['records']
  } catch (error) {
    console.error('Failed to fetch data:', error)
  } finally {
    isLoading.value = false
  }
}

onMounted(() => {
  init()
})

const goToSongDetail = (song) => {
  router.push({ name: 'SongDetail', query: { songId: song.id } })
}

const goToAlbumDetail = (album) => {
  router.push({ name: 'SongList', query: { albumId: album.id } })
}

const goToPlaylistDetail = (playlist) => {
  router.push({ name: 'SongList', query: { playlistId: playlist.id } })
}

const goToFollow = () => {
  router.push({ name: 'UserFollow' })
}
</script>

<template>
  <div class="main-container">
    <h1>Welcome to the Online Music Platform</h1>
    <div class="section">
      <h2>Popular Songs</h2>
      <div class="card-container">
        <template v-if="isLoading">
          <el-skeleton v-for="index in 3" :key="index" class="card" animated />
        </template>
        <template v-else>
          <el-card
            v-for="(song, index) in popularSongs"
            :key="index"
            class="card"
            :style="{
              backgroundImage: `url(${song.img})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center'
            }"
            @click="goToSongDetail(song)"
          >
            <h3>{{ song.name }}</h3>
            <p>{{ song.artist }}</p>
          </el-card>
        </template>
      </div>
      <el-button type="primary" @click="goToSongsList"
        >View All Songs</el-button
      >
    </div>

    <div class="section">
      <h2>Popular Albums</h2>
      <div class="card-container">
        <template v-if="isLoading">
          <el-skeleton v-for="index in 3" :key="index" class="card" animated />
        </template>
        <template v-else>
          <el-card
            v-for="(album, index) in popularAlbums"
            :key="index"
            class="card"
            :style="{
              backgroundImage: `url(${album.img})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center'
            }"
            @click="goToAlbumDetail(album)"
          >
            <h3>{{ album.name }}</h3>
            <p>{{ album.desc }}</p>
          </el-card>
        </template>
      </div>
      <el-button type="primary" @click="goToAlbumList"
        >View All Albums</el-button
      >
    </div>

    <div class="section">
      <h2>Popular Playlists</h2>
      <div class="card-container">
        <template v-if="isLoading">
          <el-skeleton v-for="index in 3" :key="index" class="card" animated />
        </template>
        <template v-else>
          <el-card
            v-for="(playlist, index) in popularPlaylists"
            :key="index"
            class="card"
            :style="{
              backgroundImage: `url(${playlist.img})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center'
            }"
            @click="goToPlaylistDetail(playlist)"
          >
            <h3>{{ playlist.name }}</h3>
            <p>{{ playlist.desc }}</p>
          </el-card>
        </template>
      </div>
      <el-button type="primary" @click="goToPlaylistList"
        >View All Playlists</el-button
      >
    </div>

    <div class="my-section">
      <div class="section">
        <h2>My Favorites</h2>
        <el-button type="success" @click="goToFavorites"
          >View My Favorites</el-button
        >
      </div>
      <div class="section">
        <h2>My Follow</h2>
        <el-button type="success" @click="goToFollow">View My Follow</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  text-align: left;
}

h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  color: var(--el-color-primary);
  text-align: center;
  background: linear-gradient(135deg, var(--el-color-primary), #6dd5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  padding-left: 0.75rem;
  border-left: 4px solid var(--el-color-primary);
  color: #2c3e50;
}

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.card {
  position: relative;
  width: 100%;
  height: 300px;
  border-radius: 12px !important;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  cursor: pointer;
  background-color: #f8f9fa;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.card h3 {
  position: absolute;
  bottom: 50px;
  left: 20px;
  color: white;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  z-index: 1;
}

.card p {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  margin: 0;
  z-index: 1;
}

.el-button {
  margin-top: 1rem;
  transition: all 0.3s ease;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.el-button--primary {
  background: linear-gradient(135deg, var(--el-color-primary), #6dd5fa);
  border: none;
}

.el-button--success {
  background: linear-gradient(135deg, #67c23a, #a0d911);
  border: none;
}

.el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .main-container {
    padding: 1rem;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  .card {
    height: 250px;
  }
}

.card.loading {
  background: #f0f2f5;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.card h3,
.card p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}

.my-section {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}

.section {
  flex: 1;
  margin: 0 1rem;
  padding: 1rem;
}
</style>
